<template>
    <view class="container">
        <view class="open-page" v-if="isVerify">
            <view class="page-context">
                <view class="page-bg"></view>
                <view class="page-tips">苹果用户不提供此功能，请移步网页版</view>
            </view>
        </view>
        <block v-else>
            <view class="market-top" >
                <view class="market-top-title">
                    <u-text
                        text="集市"
                        size="42rpx"
                        color="#000000"
                        bold
                    ></u-text>
                    <!--u-icon
                        name="https://img.ionepin.com/fc13de3acafb29202de2bf108245c2b2ff4ea3b0.png"
                        width="50rpx"
                        height="50rpx"
                    ></u-icon-->
                </view>
                <view class="my-page-banner">
                    <view class="my-page-title">我的主页</view>
                    <view class="my-page-seller">出售中 {{ sellerNum }}</view>
                    <view class="my-page-btn" @click="$u.route('pages_v2/myPage/index')">立即进入</view>
                </view>
            </view>
            <u-row
                customStyle="flex-wrap: wrap;padding: 20rpx 10rpx; background: #F9F9F9;"
                v-if="marketList.length > 0"
                gutter="30rpx"
            >
                <u-col
                    span="6"
                    v-for="(item, k) in marketList"
                    :key="k"
                    customStyle="margin-bottom: 20rpx"
                    @click="$u.route({
                        url: 'pages_v2/collectInfo/index',
                        params: { nftId: item.nftId, type: 'exchange' }
                    })"
                >
                    <market-item
                       :nft="item.nft"
                       :minMoney="item.minMoney"
                       :maxMoney="item.maxMoney"
                    ></market-item>
                </u-col>
            </u-row>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                textSize="38rpx"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 8"
                marginTop="20rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
            <u-back-top
                :scroll-top="scrollTop"
                icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_top.png"
                :iconStyle="{
                width: '142rpx',
                height: '144rpx'
            }"
                right="40rpx"
                bottom="140rpx"
            ></u-back-top>
            <u-popup
                :show="!agreeMarket"
                mode="center"
                :customStyle="{
                    width: '660rpx',
                    background: '#FFFFFF',
                    boxShadow: '0px 0px 13rpx 0px #999999',
                    borderRadius: '18rpx',
                    overflow: 'hidden'
                }"
            >
                <view class="popup-body">
                    <view class="popup-body-title">隐私及功能使用声明提示</view>
                    <view class="popup-body-content">
                        <view class="content-p">
                            欢迎使用“数藏一品”，我们非常重视您的个人信息和隐私保护。在您使用服务之前，请仔细阅读《数藏一品隐私保护政策》，我们将严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
                        </view>
                        <view class="content-p">本功能板块的使用，仅限实名认证为年满18周岁的中国大陆用户。</view>
                        <view class="content-p">如您同意此政策，请点击“同意”并开始使用我们的产品和服务，我们尽全力保护您的个人信息安全。</view>
                    </view>
                    <view class="radio-content">
                        <u-radio
                            size="28rpx"
                            @change="userAgree=true"
                        >
                        </u-radio>
                        <view class="radio-label">请认真阅读后勾选并同意</view>
                        <view class="radio-agreement" @click="$u.route('pages/article/detail', {articleKey:'privacy'})">《隐私协议》</view>
                    </view>
                    <view class="btn-ground">
                        <view class="btn-cancel" @click="$u.route({type: 'switchTab', url: 'pages_v2/index/index'})">取消</view>
                        <view class="btn-confirm" :class="userAgree? null:'disable'" @click="agree">同意</view>
                    </view>
                </view>
            </u-popup>
        </block>
    </view>
</template>

<script>
    import MarketItem from "@/components/MarketItem"
    import { getExchangeMarket, getUserExchangeNum } from "@/config/api"
    export default {
        name: "index",
        components: {
            MarketItem
        },
        data() {
            var platform = null
            var version = null
            // #ifdef APP-PLUS
            platform = plus.os.name
            version = plus.runtime.version
            // #endif
            return {
                listQuery: {
                    page: 1,
                    list_rows: 20,
                    column: "maxMoney",
                    direction: "desc"
                },
                marketList: [],
                total: 0,
                sellerNum: 0,
                scrollTop: 0,
                userAgree: false,
                platform: platform,
                version: version
            }
        },
        async onLoad() {
            await this.getData()
            this.sellerNum = await getUserExchangeNum()
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        computed: {
            loadStatus() {
                if (this.total > this.marketList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
            agreeMarket() {
                return this.$store.getters.agreeMarket
            },
            isVerify() {
                // #ifdef APP-PLUS
                if (this.$store.getters.iosVerify=='1' && this.platform == 'iOS') {
                    return true
                }
                // #endif
                return false
            }
        },
        onReachBottom() {
            if (this.total > this.marketList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        async onPullDownRefresh() {
            this.listQuery.page = 1
            await this.getData()
            this.sellerNum = await getUserExchangeNum()
            uni.stopPullDownRefresh()
        },
        onHide() {
            uni.stopPullDownRefresh()
        },
        methods: {
            async getData(more = false) {
                const res = await getExchangeMarket(this.listQuery)
                if (more) {
                    this.marketList = [...this.marketList, ...res.items]
                } else {
                    this.marketList = res.items
                }
                this.total = res.total
            },
            agree() {
                if (!this.userAgree) {
                    return
                }
                this.$store.dispatch("user/setAgreeMarket")
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: #F9F9F9;
    }
    .container {
        .market-top {
            background: #ffffff;
            padding: 20rpx 26rpx;
            .market-top-title {
                display: flex;
                justify-content: space-between;
                margin-top: calc(var(--status-bar-height) + 30rpx);
            }
            .my-page-banner {
                box-sizing: border-box;
                background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/a15174e8dad72c77a902b2934afadf4d8e24c005.png") no-repeat;
                background-size: 100% 100%;
                height: 143upx;
                padding: 26rpx 40rpx;
                position: relative;
                margin-top: 50rpx;
                .my-page-title {
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .my-page-seller {
                    margin-top: 10rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B6B6B6;
                }
                .my-page-btn {
                    position: absolute;
                    background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/9b398c8f713ac1c6d0a694e90f9ed44200d1cf03.png") no-repeat;
                    background-size: 100% 100%;
                    top: 50%;
                    right: 40rpx;
                    width: 180rpx;
                    height: 54rpx;
                    margin-top: -27rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFE0C4;
                    text-align: center;
                    line-height: 54rpx;
                }
            }
        }
        .popup-body {
            padding-top: 62rpx;
            padding-bottom: 40rpx;
            .popup-body-title {
                text-align: center;
                font-size: 38rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #356CE7;
            }
            .popup-body-des {
                padding: 60rpx 35rpx 40rpx 35rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
            }
            .popup-body-content {
                padding: 40rpx 35rpx 80rpx 35rpx;
                .content-p {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #4A4A4A;
                    text-indent: 1.5em;
                }
            }
            .radio-content {
                display: flex;
                justify-content: center;
                align-items: center;
                .radio-label {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                }
                .radio-agreement {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    padding: 0 5rpx;
                }
            }
            .btn-ground {
                padding: 0 26rpx;
                display: flex;
                justify-content: space-between;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                text-align: center;
                margin-top: 30rpx;
                .btn-cancel {
                    width: 292rpx;
                    height: 88rpx;
                    border-radius: 4rpx;
                    border: 1px solid #979797;
                    color: #000000;
                    line-height: 88rpx;
                }
                .btn-confirm {
                    width: 292rpx;
                    height: 88rpx;
                    background: #000000;
                    border-radius: 4rpx;
                    line-height: 88rpx;
                    color: #ffffff;
                }
                .disable {
                    background: #999999;
                }
            }
        }
        .empty {
            padding-top: 150rpx;
        }
        .open-page {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #FFFFFF;
            .page-context {
                .page-bg {
                    background: url("https://img.ionepin.com/bc93d7ae54a9a9f50a5898be1308475354ca8473.png") no-repeat;
                    background-size: 100% 100%;
                    width: 100%;
                    height: 332rpx;
                }
                .page-tips {
                    text-align: center;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #BAC0CE;
                    margin-top: 57rpx;
                }
            }
        }
    }
</style>
